<template>
    <div class="simple-tab">
        <div class="tab-left">
            <div @click="selectTab(tab)" v-for="(tab,index) in tabs" :key="index" class="tab-item" :class="{active:activeValue==tab.value}">
                {{tab.label}}
            </div>
        </div>
        <div class="tab-right">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: [String, Number]
  },
  data () {
    return {
      activeValue: ''
    }
  },
  watch: {
    value (val) {
      this.activeValue = val
    }
  },
  methods: {
    selectTab (tab) {
      this.activeValue = tab.value
      this.$emit('input', tab.value)
      this.$emit('change', tab.value)
    }
  },
  created () {
    if (this.value) {
      this.activeValue = this.value
    }
  }
}
</script>

<style lang="scss" scoped>
.simple-tab{
    border-bottom: 1px solid #E4E7ED;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 20px;
    .tab-left{
        flex:1;
    }
    .tab-left,.tab-right{
        display: flex;
        align-items: center;
    }
    .tab-item{
        font-size: 14px;
        padding: 5px 20px;
        color:#979797;
        cursor: pointer;
        &.active{
            color:#3ca0ec;
            //font-weight: bold;
        }
        &+.tab-item{
            border-left: 1px solid #E4E7ED;
        }
    }
}
</style>
